@import "tailwindcss";

@layer components {
    /* Swiper styles */
    .swiper {
    @apply w-full h-[500px] mb-8;
    }

    .swiper-slide {
    @apply text-center bg-white flex justify-center items-center bg-cover bg-center;
    display: none; /* Will be controlled by the controller */
    }

    .swiper-slide.active {
    @apply flex;
    }

    .slide-content {
    @apply bg-white/90 p-8 rounded-lg max-w-[600px];
    }

    .slide-content h2 {
    @apply text-4xl mb-4 text-gray-800;
    }

    .slide-content p {
    @apply text-xl mb-6 text-gray-600;
    }

    .cta-button {
    @apply inline-block px-8 py-4 bg-blue-600 text-white no-underline rounded font-bold;
    transition: background-color 0.3s ease;
    }

    .cta-button:hover {
    @apply bg-blue-700;
    }

    .swiper-button-next,
    .swiper-button-prev {
    @apply text-blue-600;
    }

    .pagination-dot {
    @apply inline-block w-2.5 h-2.5 rounded-full bg-gray-300 mx-1.5 cursor-pointer;
    }

    .pagination-dot.active {
    @apply bg-blue-600;
    }
}
